<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="changeCount">改变</button>
  </div>
</template>
  
<script setup>
// watch侦听
import { ref, watchEffect, isRef, reactive } from "vue";
let count = ref(10);

const changeCount = () => {
  count.value++;
};

// watch和watchEffect的区别是watchEffect一上来就会执行
// 立即执行
// 有一个返回值 返回值是一个函数 可以停止监听
let stop = watchEffect(() => {
  // 会自动收集依赖
  console.log("watchEffect", count.value);
  if (count.value > 15) {
    stop();
  }
});

// 高阶函数：当一个函数的参数或者返回值是一个函数 那么这个函数就是高阶函数
// js中的数组的方法：map() filter() find() findIndex() 等都是高阶函数

// function watchEffect(fn) {
//   fn();
//   const stop = () => {};
//   return stop;
// }

// let stop = watchEffect(() => {});
</script>
  
<style scoped>
</style>